<template>
    <div class="approveItem" @click="goToDetail">
        <h1 class="titleDesc">
            <!-- <span v-if="isLeaveICon" class="titleIcon qing">假</span>
            <span v-else class="titleIcon xiaojia">销</span> -->
            <span class="titleIcon"  :class="setColor(itemData.executeType)">
                {{itemData.executeType == 1 || itemData.executeType == 2 ? '请' : '销' }}
            </span>

            <span >{{itemData.executeType=="2" || itemData.executeType=="4" ? itemData.oldSourceName : itemData.sourceName}}的{{itemData.executeType == 1 || itemData.executeType == 2 ? '请假' : '销假' }}申请</span>

            <!-- <span class="descDisplay sumDay">(共{{itemData.wfBusinessProcessData.leaveDay}}天)</span> -->
            <span class="descDisplay sumDay">(共{{itemData.executeType=="3" || itemData.executeType=="4" ? itemData.wfBusinessProcessData.effeLeaveDay : itemData.wfBusinessProcessData.leaveDay}}天)</span>
            <span class="descDisplay">{{itemData && itemData.wfBusinessProcessData.processTypeName}}</span>
            <i class=" descDisplay Detail">></i>
        </h1>
        <ul class="disList">
            <li>
                <i class="icon-time"></i>
                <!-- <span>{{itemData.wfBusinessProcessData.startTime | handleDisplayDate}}&nbsp;{{itemData.wfBusinessProcessData.startTimeHalfDaySign | ampm}}</span> &nbsp;至&nbsp; -->
                <span>{{(itemData.executeType=="3" || itemData.executeType=="4" ? itemData.wfBusinessProcessData.effeStartTime : itemData.wfBusinessProcessData.startTime) | handleDisplayDate}}&nbsp;{{(itemData.executeType=="3" || itemData.executeType=="4" ? itemData.wfBusinessProcessData.effeStartTimeHalfDaySign : itemData.wfBusinessProcessData.startTimeHalfDaySign) | ampm}}</span> &nbsp;至&nbsp;

                <!-- <span>{{itemData.wfBusinessProcessData.endTime | handleDisplayDate}}&nbsp;{{itemData.wfBusinessProcessData.endTimeHalfDaySign | ampm}}</span> -->
                <span>{{(itemData.executeType=="3" || itemData.executeType=="4" ? itemData.wfBusinessProcessData.effeEndTime : itemData.wfBusinessProcessData.endTime) | handleDisplayDate}}&nbsp;{{(itemData.executeType=="3" || itemData.executeType=="4" ? itemData.wfBusinessProcessData.effeEndTimeHalfDaySign : itemData.wfBusinessProcessData.endTimeHalfDaySign) | ampm}}</span>

            </li>
            <li><i class="icon-dept"></i><span>{{itemData && itemData.wfBusinessProcessData.deptName}}</span></li>
            <li><i class="icon-approve"></i><span :class="classObject">{{itemData.status | handleStatus}}</span></li>
        </ul>
        <div class="bgColor"></div>    
    </div>

</template>

<script>

export default {
  name: 'app',
  data() {
    return {
      endDate:"2017.09.20 下午",
      dept:"招商集团总经办",
      approve:"部门领导审批",

    };
  },

  props:{
      "itemData":{
          type:Object,
          default:function(){
              return {
                  wfBusinessProcessData:{}
              };
          }
      },
      'type':{
      }
  
  },
  filters:{

     ampm: function(value) {
          if (value == '1') {
              return '上午';
          } else if (value == '2') {
              return '下午';
          }
      },
      handleDisplayDate: function(val){
          if (val) {
                if (typeof val === 'string' && val.split(' ').length>1) {
                    return val.split(' ')[0].replace(/\-/g, '.');
                }
              var dataObj = new Date(val)
              var year = dataObj.getFullYear();
              var month = dataObj.getMonth() + 1;
              month = month > 9 ? month : '0' + month;
              var day = dataObj.getDate();
              day = day > 9 ? day : '0' + day;
              return year + "." + month + "." + day 
          } else {
              return ''
          }
      },
      handleStatus: function(status){
          return status == 1 ? '已备案' : (status == 2 ? '审批中' : (status == 3 ? '已撤销' : '已拒绝'));
      }
  },
  methods: {
      goToDetail:function(){
          //  let params = {
          //     applyId:obj.applyId ,
          //     exectionId: obj.exectionId
          //  }

          if (this.type == 'done') {
              localStorage.setItem('detail_AI',this.itemData.id);
              location.href = '/module/approveRecord.html';
          } else {
              localStorage.setItem('app_AI',this.itemData.id)
              location.href = '/module/approveDetail.html';
          }
                 
      },
      setColor:function(k){
           if (k == 1 || k == 2) {
                return 'qing';
           } else {
                return 'xiaojia'
           } 
      },
  },
  components: {


  },
  computed:{
        classObject: function () {

            if (this.itemData.status == 2) {
                return {'waitAppro':true};
            } else if (this.itemData.status == 1) {
                return {'Appro':true};
            } else {
                return {'reject':true};
            }

        },
        // isLeaveICon:function(){
        //     if ((this.itemData.applyId && this.itemData.applyId.indexOf('XJ')>-1)|| (this.itemData.busi_id && this.itemData.busi_id.indexOf('XJ')>-1)) {
        //         return false;
        //     }
        //     return true;
        // }
  },
  watch: {

  },
  mounted: function() {

  }
};
</script>

<style lang="less" scoped>

  .approveItem{
      padding-top:0.26rem;
      background-color:#fff;
      .titleDesc{
          padding-left:0.9rem;
          padding-right:0.6rem;
          font-size:0.4rem;
          position: relative;
          line-height:0.48rem;
          .titleIcon{
            position:absolute;
            font-size:0.32rem;
            left:0.3rem;
            width:0.48rem;
            height:0.48rem;
            line-height:0.48rem;
            right: 0;
            top: 0;
            bottom: 0;
            margin:auto 0;
            text-align:center;
            font-weight:500;
            color:#fff;
            
            border-radius:50%;
          }
          span.qing{
              background-color:#007DE4;
          }
          span.xiaojia{
              background-color: #1cbe29;
          }
          span.daiqing{
                background-color: #f7ba2a;
          }
          .descDisplay{
            color:#999;
            float:right;
            margin-left:0.16rem;
            font-size:0.32rem;
            padding:0;
          }
          .sumDay{
              margin-right:0.3rem;
          }
          .Detail{
            position:absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin:auto 0;
            width:0.6rem;
            text-align:center;
            height:0.48rem;
            line-height:0.48rem;
          }
      }
      .disList {
          margin-top:0.26rem;
          margin-bottom:0.16rem;
          li{
              line-height:0.52rem;
              height:0.52rem;
              font-size:0.32rem;
              // font-weight:600;
              color:#999;
              padding-left:0.5rem;
              i{
                margin-right:0.1rem;
              }
              .leaderAppr{
                color:#0079E3;
              }

                .reject{
                    color:#E24040;
                }
                .waitAppro{
                    color:#D8D41D;
                }
                .Appro{
                    color:green;                
                }

          }
      }
      .bgColor{
        height:0.02rem;
        background-color:#F3F3F3;
      }
  }

</style>

